<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Getting Started: Serving Web Content</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="/js/layui/css/layui.css" />
    </head>
    <body>

        <div id="main" style="height: 600px; width: 900px; margin: 10px auto;float: left"></div>
        <select name="count" id="count" class="layui-input-block  layui-form"  style="float: left">
            <option value="10" selected="selected">10</option>
            <option value="15">15</option>
            <option value="20">20</option>
        </select>
    </body>

    <script src="/js/jquery.js"></script>
    <script src="/js/echarts.js"></script>
    <script src="/js/layui/layui.all.js"></script>
    <script>
        $(function(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var layer = layui.layer ,form = layui.form;

            var createChart = function(count){
                myChart.showLoading();
                var names = [];    //类别数组（实际用来盛放X轴坐标值）
                var nums = [];    //销量数组（实际用来盛放Y坐标值）

                $.ajax({
                    type: 'get',
                    url: '/getBallot/' + count ,//请求数据的地址
                    dataType: "json",        //返回数据形式为json
                    success: function (result) {
                        //请求成功时执行该函数内容，result即为服务器返回的json对象
                        $.each(result.data, function (index, item) {
                            names.push(item.name);    //挨个取出类别并填入类别数组
                            nums.push(item.ranking);    //挨个取出销量并填入销量数组
                        });

                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({        //加载数据图表
                            title: {
                                text: '投票数排名'
                            },
                            tooltip : {
                                trigger: 'axis'
                            },
                            toolbox: { //可视化的工具箱
                                show: true,
                                feature: {
                                    dataView: { //数据视图
                                        show: true
                                    },
                                    restore: { //重置
                                        show: true
                                    },
                                    dataZoom: { //数据缩放视图
                                        show: true
                                    },
                                    saveAsImage: {//保存图片
                                        show: true
                                    },
                                    magicType: {//动态类型切换
                                        type: ['bar', 'line']
                                    }
                                }
                            },
                            xAxis: {
                                data: names,
                                axisLabel:{
                                    interval: 0
                                } //显示横坐标过多的隐藏值
                            },
                            yAxis: {
                                splitLine: { show: false },//去除网格线
                                name: ''
                            },
                            series: [{
                                name: '投票数排名',
                                type: 'bar',
                                data: nums
                            }]
                        });
                    },
                    error: function (errorMsg) {
                        //请求失败时执行该函数
                        layer.alert("图表请求数据失败!");
                        myChart.hideLoading();
                    }
                });
            };

            var initChart = function(){
                var count = $("select option:selected").val();
                createChart(count);
            };

            var changeCount = function(){
                $("#count").change(function(){
                    initChart();
                });
            };

            initChart();
            changeCount();
        });

    </script>
</html>